<template>
  <div class="vipCenter-warpper">
    <div class="topBox flex">
      <img :src="avatar">
      <div class="vipKind">{{userCenter.score|scoreLi}}</div>
      <span class="point">我的积分{{userCenter.score}}分</span>  
    </div>
    <flow>
      <flow-state state="V1" :is-done="userCenter.score<200"></flow-state>
      <flow-line  :is-done="userCenter.score>400" :tip="'进行中'" tip-direction="bottom" :process-span="userCenter.score>400?'100':'50'"></flow-line>

      <flow-state state="V2" :is-done="userCenter.score>400"></flow-state>
      <flow-line  :is-done="userCenter.score>600"></flow-line>
      <flow-state state="V3" :is-done="userCenter.score>600"></flow-state>
      <flow-line :is-done="userCenter.score>600"></flow-line>

      <flow-state state="V4" :is-done="userCenter.score>800" ></flow-state>
      <flow-line :is-done="userCenter.score>800"></flow-line>
      
      <flow-state state="V5" :is-done="userCenter.score>1000"></flow-state>
    </flow>
    <div class="tip">
      还需{{scoreD}}分即可升级,更多特权等你来拿
    </div>
    <!-- <div class="fengeBar"></div> -->

  </div>
</template>

<script>
  import axios from '@/api/request'
  // import headers from '../components/header.vue'
  import { Step, StepItem,Flow, FlowState, FlowLine } from "vux";

  export default {
    name: '',
    components: {
      StepItem,
      Step,
      Flow,
      FlowState,
      FlowLine
    },
    data () {
      return {
        nickName: '',
        sex: '',
        intro: '',
        step: 2,
        userCenter:{},
        scoreD:'',
        avatar: require('../assets/images/2.png')
      }
    },
    filters:{
          scoreLi(score){
              let sct=""
              if(score<200){
                sct='V1会员'
              }else if(score<400){
               sct='V2会员'
              }else if(score<600){
               sct='V3会员'
              }else if(score<800){
                sct='V4会员'
              }else{
                sct='V5会员'
              }
              return sct
          }
        },
    created(){
      this.fetchUserInfo()
    },
    mounted(){

    },
    methods:{
      fetchUserInfo() {
                let data = {
                    openId: this.$route.query.openid
                }
                axios('/device/userEntity/getUserCenter','post',data).then(res=>{
                    if(res.data.code==1000){
                         console.log(res)
                        this.userCenter=res.data.data.userCenter
                        if(this.userCenter.score<200){
                          this.scoreD=200-this.userCenter.score
                        }else if(this.userCenter.score<400){
                            this.scoreD=400-this.userCenter.score
                        }else if(this.userCenter.score<600){
                             this.scoreD=600-this.userCenter.score
                        }else if(this.userCenter.score<800){
                          this.scoreD=800-this.userCenter.score
                        }else if(this.userCenter.score<1000){
                           this.scoreD=1000-this.userCenter.score
                        }
                    }
                })
            },
    }

  };
</script>

<style >
    body{
        position: absolute;
        left: 0;
        top: 0;
        /*background: rgb(244,244,244);*/
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .vipCenter-warpper .weui-wepay-flow__li .weui-wepay-flow__state{
      font-size: 12px;
      color: #fff;
      width: 22px;
      height: 22px;
      font-size: 12px;
      line-height: 22px;
      border-radius: 50%;
      /*background: transparent;*/
    }
</style>
<style lang="less" scoped>
    .vipCenter-warpper .weui-wepay-flow__line{
      margin-top: 16rem/75;
    }
  .vipCenter-warpper{
    height: 100%;
    box-sizing: border-box;
    background: #ff475e;
    .topBox{
      flex-direction: column;
      // justify-content: center;
      align-items: center;
      padding-top: 30rem/75;
      height: 368rem/75;
      margin-bottom: 32rem/75;
      img{
        width: 160rem/75;
        height: 160rem/75;
      }
      .vipKind{
        width: 260rem/75;
        height: 64rem/75;
        line-height: 64rem/75;
        border-radius: 64rem/75;
        margin-top: 17rem/75;
        background: #ffbe40;
        font-size: 35rem/75;
        color: #fff;
        text-align: center;
      }
      .point{
        font-size: 33rem/75;
        color: #fff;
        margin-top: 58rem/75;
      }
    }
    .tip{
      width: 100%;
      text-align: center;
      color: #fffefe;
      font-size: 26rem/75;
    }
  }

</style>

